<template>
  <div class="city">
    <div class="city-nav">
      <Head />
      <div class="city-search">
        <SearchInput />
      </div>
    </div>

    <!-- 热门城市 -->
    <div class="city-info">
      <p>当前定位</p>
      <div class="city-location">{{ city }}</div>
      <p>热门城市</p>
      <ul class="city-list">
        <li
          class="city-name"
          v-for="(item, index) in cityList"
          :key="index"
          @click="cityName(item.city)"
        >
          <span> {{ item.city }} </span>
        </li>
      </ul>
    </div>
    <div style="clear: both"></div>

    <!-- 全部城市 -->
    <div class="city-all">
      <div v-for="(ele, index) in allCity" :key="index">
        <div class="city-all-title">{{ ele.province }}</div>
        <ul>
          <li
            class="city-all-name"
            v-for="eles in ele.cityName"
            :key="eles"
            @click="cityName(eles)"
          >
            {{ eles }}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import api from "../../api";
import Head from "../head/Head";
import SearchInput from "../searchInput/SearchInput";

export default {
  name: "City",
  data() {
    return {
      city: localStorage.getItem("yiju-city")
        ? localStorage.getItem("yiju-city")
        : "大同",
      cityList: [],
      allCity: [],
    };
  },
  components: {
    Head,
    SearchInput,
  },
  mounted() {
    api.getHotCity().then((res) => {
      //   console.log(res.data.list);
      this.cityList = res.data.list;
    });

    api.gotoAllCity().then((res) => {
      //   console.log(res.data.list);
      this.allCity = res.data.list;
    });
  },
  methods: {
    cityName(city) {
      /**
       * 点哪个地方获得哪个地方的地名，并存到本地
       */
      //   console.log(city);
      localStorage.setItem("yiju-city", city);
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.city-nav {
  /* display: flex;
  align-items: center; */
  position: relative;
}
.city-search {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.city-info p {
  text-align: left;
  font-size: 13px;
  padding: 0.3rem 0 0 0.4rem;
  color: rgba(000, 000, 000, 0.7);
}
.city-location {
  width: 30%;
  background-color: rgba(000, 000, 000, 0.1);
  margin: 0.35rem 0 0 0.15rem;
  border-radius: 0.08rem;
  padding: 0.1rem 0;
}
.city-name {
  float: left;
  width: 33%;
  text-align: center;
  margin-top: 0.35rem;
}
.city-name span {
  display: block;
  margin: 0 auto;
  width: 80%;
  font-size: 20px;
  border-radius: 0.08rem;
  padding: 0.12rem 0;
  background-color: rgba(000, 000, 000, 0.1);
}
.city-all {
  margin-top: 0.3rem;
}
.city-all-title {
  font-size: 15px;
  background-color: #ff5555;
  text-align: left;
  padding: 0.1rem 0 0.1rem 0.2rem;
}
.city-all-name {
  text-align: left;
  color: rgba(000, 000, 000, 0.6);
  font-size: 15px;
  width: 90%;
  margin: 0 auto;
  border-bottom: 0.01rem solid rgba(000, 000, 000, 0.1);
  padding-top: 0.1rem;
}
</style>
